<template>
  <ContentField v-if="!$store.state.user.pulling_info">
    <div
      class="user-login d-flex justify-content-center align-items-center animate__animated animate__bounceIn">
      <div class="row modal-bg">
        <div class="d-flex justify-content-center align-items-center">
          <h2 class="login-title">欢迎登录</h2>
        </div>
        <div class="clo-3">
          <form @submit.prevent="login">
            <div class="mb-3">
              <label for="username" class="form-label"></label>
              <input
                v-model="username"
                type="text"
                class="form-control"
                id="username"
                placeholder="请输入账号" />
            </div>
            <div class="mb-3">
              <label for="password" class="form-label"></label>
              <input
                v-model="password"
                type="password"
                class="form-control"
                id="password"
                placeholder="请输入密码" />
            </div>
            <!-- <div class="error_message">{{ error_message }}</div> -->
            <button type="submit" class="btn btn-outline-info">登录</button>
          </form>
        </div>
      </div>
    </div>
  </ContentField>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { useStore } from "vuex";
import { ref } from "vue";
import router from "@/router/index";
import { toast } from "vue3-toastify";

export default {
  components: {
    ContentField,
  },

  setup() {
    const store = useStore();
    let username = ref("");
    let password = ref("");
    // let error_message = ref("");

    const jwt_token = localStorage.getItem("jwt_token");
    if (jwt_token) {
      store.commit("updateToken", jwt_token);
      store.dispatch("getinfo", {
        success() {
          router.push({ name: "home" });
          store.commit("updatePullingInfo", false);
        },
        error() {
          store.commit("updatePullingInfo", false);
        },
      });
    } else {
      store.commit("updatePullingInfo", false);
    }

    const login = () => {
      store.dispatch("login", {
        username: username.value,
        password: password.value,
        success() {
          toast("欢迎回来~", {
            theme: "auto",
            type: "success",
            position: "top-right",
            autoClose: 1000,
            hideProgressBar: true,
            dangerouslyHTMLString: true,
            transition: "slide",
          });
          setTimeout(() => {
            store.dispatch("getinfo", {
              success() {
                router.push({ name: "home" });
              },
            });
          }, 1000);
          router.push({ name: "home" });
        },
        error() {
          toast("用户名或密码错误", {
            theme: "auto",
            type: "error",
            position: "top-right",
            autoClose: 1000,
            hideProgressBar: true,
            dangerouslyHTMLString: true,
            transition: "slide",
          });
          // error_message.value = "用户名或密码错误";
        },
      });
    };

    return {
      username,
      password,
      // error_message,
      login,
    };
  },
};
</script>

<style scoped>
.user-login {
  height: 100%;
  width: 100%;
}

.modal-bg {
  border: 1px solid rgba(13, 202, 240, 0.5);
  background: linear-gradient(
    to right,
    rgba(13, 202, 240, 0.1) 0%,
    rgba(20, 26, 32, 0.1) 50%,
    rgba(13, 202, 240, 0.1) 100%
  );
  backdrop-filter: blur(50px);
  padding: 20px;
  border-radius: 10px;
  animation: pulse 2s linear infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 10px rgba(0, 128, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(0, 128, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(0, 128, 255, 0);
  }
}

.login-title {
  color: white;
}

button {
  width: 100%;
}

/* div.error_message {
  color: red;
} */

button:hover {
  color: white;
}
</style>
